<template>
  <div class="pagss">



    <!-- 头部导航++++++++++++++++++++++ -->
    <Navv ></Navv>
    <!-- 头部导航=============== -->

    <el-row :gutter="20">

      <el-col :span="4">
        <div class="leftbox">
          <Sidebarts :key="keyInfo" defaultActive="9"></Sidebarts>
        </div>
      </el-col>

      <el-col :span="20">
        <div class="panel-group1">
          <div class="flex-container">




            <!-- itme+++++++++++++ -->
            <div :class="{'xzitem':item.id==game_id}" class="row_a_c itme_box mt_20 cursor " v-for="(item, index) in GameList"
              :key="index" @click="gameSwitch(item.id,item.name,item.logo,item.is_versions)">
              <div>
                <img style="height: 78px;width: 78px;" :src="item.logo" />
              </div>
              <div class="ml_14">
                <div class="f_18 f_bold">{{item.name}}</div>
                <div class="row_a_c">
                  <div class="f_15 color_878787">AppID:{{item.appid}}</div>
                  <div class="ml_10">
                    <i class="el-icon-document-copy xjt color_1A82FB" @click.stop="copyUrl(item.appid)"></i>
                  </div>
                </div>

                <div class="row_a_c" v-if="item.is_versions==1">
                  <div class="dot"></div>
                  <div class="f_15 color_878787">已上传版本</div>
                </div>

                <div class="row_a_c" v-else>
                  <div class="dot_red"></div>
                  <div class="f_15 color_878787">未上传版本</div>
                </div>

              </div>
            </div>




            <!-- itme+++++++++++++ -->
            <!--            <div class="row_a_c itme_box mt_20">
              <div>
                <img style="height: 78px;width: 78px;" src="@/assets/images/cqlog.jpg" />
              </div>
              <div class="ml_14">
                <div class="f_18 f_bold">原始传奇1.76</div>
                <div class="row_a_c">
                  <div class="f_15 color_878787">AppID:9As531019sf588hs7...</div>
                  <div class="ml_10">
                    <i class="el-icon-document-copy xjt color_1A82FB "></i>
                  </div>
                </div>
                <div class="row_a_c">
                  <div class="dot"></div>
                  <div class="f_15 color_878787">已上传版本</div>
                </div>
              </div>
            </div> -->
            <!-- item======================== -->










          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';
  import Navv from "@/components/Navv";
  import Sidebarts from "@/components/Sidebarts";
  import * as Game from "@/api/system/game"

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navv,
      Sidebarts

    },
    data() {
      return {
        keyInfo: 1,
        game_id: '',
        game_name: '',
        game_logo: '',
        GameList: [], //游戏列表
        game_count: '', //游戏总条数
      }
    },

    created() {
      this.getGameList(); //查询游戏列表
      this.game_id = localStorage.getItem('game_id')
      this.game_name = localStorage.getItem('game_name')
      this.game_logo = localStorage.getItem('game_logo')
    },
    mounted() {

    },
    methods: {
      copyUrl(data) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
      },

      /**查询游戏列表 */
      getGameList() {
        this.loading = true;
        Game.getGameList().then(response => {
          this.GameList = response.data.rows;
          this.game_count = response.data.total;
          this.loading = false;
        });
      },


      //游戏切换 id 游戏id   is_versions 1已上传文件
      gameSwitch(id, name, logo, is_versions) {
        localStorage.setItem('game_id', id)
        localStorage.setItem('game_name', name)
        localStorage.setItem('game_logo', logo)
        this.getGameList()

        this.keyInfo += 1
          console.log('keyInfo',this.keyInfo)
        this.game_id = localStorage.getItem('game_id')
        this.game_name = localStorage.getItem('game_name')
        this.game_logo = localStorage.getItem('game_logo')

        // if (is_versions == 1) {
        //   this.toUrl('/index')
        // } else {
        //   this.toUrl('/center/gameConfiguration')
        // }
      },

      toUrl(url) {
        this.$router.replace({
          path: url,
        })
      },


    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    background: #F6F7FB;
    height: 100%;
    // padding: 5px 0 15px 40px;
  }

  .xzitem {
    // background: #BBBBBB !important;
    border: 1px solid red !important;
  }


  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 36px;
    min-height: 800px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .leftbox {
    padding-top: 50px;
    z-index: 100px;
    background: #1B1E28;
    height: calc(90vh);
    // height: 100%;
  }



  .dot {
    content: '';
    margin: 3px;
    display: table;
    width: 10px;
    height: 10px;
    background: #42D51A;
    border-radius: 50%;
  }

  .dot_red {
    content: '';
    margin: 3px;
    display: table;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
  }

  .wrap:after {
    content: "";
    width: 180rpx;
    height: 0;
    visibility: hidden;
  }


  .itme_box {
    padding: 15px;
    width: 386px;
    height: 110px;
    background: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #BBBBBB;
    margin-right: 16px;

  }


  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .itme_box>div {
    flex-grow: 1;
  }

  .itme_box>div:last-child {
    flex-grow: 0;
  }
</style>
